<template>
  <div  class="xia">
    <button @click="myback">返回</button>
    <ul class="vip-content-kind">
      <router-link 
      class="vip-item-font"
      v-for="pro in pros"
      :key="pro.path"
      tag="li" 
      :to="pro.path">
        <i v-html="pro.icon"></i>
        <span
        active-class="currentli">{{pro.title}}</span>
      </router-link>
      <!-- <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li> -->
    </ul>
    <h1 class="vip-show-more">更多推荐</h1>
    <ul class="vip-clo-line">
      <li>女装</li>
      <li>男装</li>
      <li>鞋包</li>
      <li>童装童鞋</li>
    </ul>
    <ul class="vip-clo-line">
      <li>面部护肤</li>
      <li>手表配饰</li>
      <li>内衣</li>
      <li>运动户外</li>
    </ul>
    <ul class="vip-clo-line">
      <li>护肤彩妆</li>
      <li>手机数码</li>
      <li>轻奢</li>
      <li>旗舰店</li>
    </ul>
    <ul class="vip-clo-line">
      <li>国际</li>
      <li>母婴</li>
      <li>家居家纺</li>
      <li>大家电</li>
    </ul>
    <ul class="vip-clo-line">
      <li>家具家装</li>
      <li>唯品优选</li>
      <li>生活超市</li>
      <li>唯品医药</li>
    </ul>
  </div>
</template>

<script>
import routes from '@/router/routes'

export default {
  components: {
  },
  data () {
    return {
      selector: false,
      pros:routes.filter(routes=>routes.isJump===true)
    }
  },
  methods: {
    myback () {
      this.$router.push({
        path: this.$router.back()
      })
    }
  },
  
}
</script>

<style lang="scss">
  .currentli {
    color: rgb(224, 79, 168);
  }
  @font-face {
  font-family: 'iconfont';  /* project id 1108285 */
  src: url('//at.alicdn.com/t/font_1108285_4wpfqnwrh5f.eot');
  src: url('//at.alicdn.com/t/font_1108285_4wpfqnwrh5f.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1108285_4wpfqnwrh5f.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1108285_4wpfqnwrh5f.woff') format('woff'),
  url('//at.alicdn.com/t/font_1108285_4wpfqnwrh5f.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1108285_4wpfqnwrh5f.svg#iconfont') format('svg');
  }
  .xia {
    position: relative;
    button {
      position: absolute;
      right: 1px;
      top: 1px;
      z-index: 999;
    }

    ul.vip-content-kind {
      // display: flex;
      padding-top:2em;
      border-bottom: 1px solid #ccc;

      .vip-item-font{
          box-sizing: border-box;
          display: inline-block;
          height: 73px;
          width: 25%;
          text-align: center;
          border: 1px solid #ccc;

        i {
          font-family: "iconfont";
          font-size: 18px;
          line-height: 44px;
          color: #778192;
        }
        // i:hover {
        //   color: rgb(224, 79, 168);
        // }

        span {
          display:block;
          font-style: 12px;
          line-height: 18px;
          color: #585c64;
        }
      }
      
    }

    .vip-show-more {
      font-size:12px;
       height: 3px;
       line-height: 34px;
       padding-left:10px;
       color: #585c64;
       margin-bottom: 40px;
    }

    .vip-clo-line {
      display:flex;
      justify-content:space-between;
      margin: 0 auto;
      width: 95%;
      height: 40px;
      margin-top: 15px;
      li {
        display: inline-block;
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #f3f4f5;
        color:#585c64;
        // margin-right: 10px;
      }
    }

  }

  

</style>
